<{include file="v2/header.html"}>
<style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;600;700;900&display=swap');
        
        /* 注释弹窗 */
        .annotation-popup {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: #f5f2ea;
            text-align: center;
            border-radius: 4px;
            padding: 8px 12px;
            width: max-content;
            max-width: 200px;
            z-index: 100;
            transition: opacity 0.3s, visibility 0.3s;
            font-size: 14px;
        }
        
        .annotation-popup::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #333 transparent transparent transparent;
        }
        
        .annotation-hover:hover .annotation-popup {
            visibility: visible;
            opacity: 1;
        }
        
        /* 音频波形动画 */
        @keyframes wave {
            0%, 100% {
                height: 8px;
            }
            50% {
                height: 24px;
            }
        }
        
        .audio-wave span:nth-child(2) { animation-delay: 0.1s; }
        .audio-wave span:nth-child(3) { animation-delay: 0.2s; }
        .audio-wave span:nth-child(4) { animation-delay: 0.3s; }
        .audio-wave span:nth-child(5) { animation-delay: 0.4s; }
        .audio-wave span:nth-child(6) { animation-delay: 0.5s; }
        .audio-wave span:nth-child(7) { animation-delay: 0.4s; }
        .audio-wave span:nth-child(8) { animation-delay: 0.3s; }
        .audio-wave span:nth-child(9) { animation-delay: 0.2s; }
        .audio-wave span:nth-child(10) { animation-delay: 0.1s; }
        
        /* 滚动动画 */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        .scroll-reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 标签切换 */
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        .tab-button.active {
            border-color: #c41e3a;
            color: #c41e3a;
            font-weight: 500;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
<main class="pt-24 pb-16">
        <!-- 路径导航 -->
        <section class="container mx-auto px-4 mb-8 text-sm text-lightink scroll-reveal">
            <a href="<{spUrl c=main a=index}>" class="hover:text-cinnabar transition-colors">首页</a>

            <span class="mx-2"><i class="fa fa-angle-right"></i></span>
            <a href="<{spUrl c=main a=gushi}>" class="hover:text-cinnabar transition-colors">诗境</a>
            <span class="mx-2"><i class="fa fa-angle-right"></i></span>
            <span><{$result.title}></span>
        </section>
        
        <!-- 诗词详情 -->
        <section class="container mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
                <!-- 左侧内容区 -->
                <div class="lg:col-span-2">
                    <!-- 诗词标题与作者 -->
                    <div class="mb-10 scroll-reveal">
                        <div class="flex flex-wrap items-center gap-3 mb-4">
                            <{foreach from=$result.tags item=tag}>
                                <{if $tag@first}>
                                <span class="bg-cinnabar/10 text-cinnabar text-sm px-3 py-1 rounded-full"><{$tag}></span>
                                <{else}>
                                <span class="bg-ink/10 text-ink text-sm px-3 py-1 rounded-full"><{$tag}></span>
                                <{/if}>
                            <{/foreach}>
                        </div>
                        <h1 class="text-[clamp(2rem,5vw,3rem)] font-song font-bold mb-4"><{$result.title}></h1>
                        <div class="flex items-center mb-6">
                            <a href="poet-detail.html" class="flex items-center text-lightink hover:text-cinnabar transition-colors">
                                <img src="https://picsum.photos/id/64/100/100" alt="<{$result.author}>头像" class="w-10 h-10 rounded-full object-cover mr-3">
                                <span><{$result.author}></span>
                            </a>
                            <span class="mx-3 text-lightink">|</span>
                            <div class="flex items-center text-lightink">
                                <span class="mr-4"><i class="fa fa-eye mr-1"></i> <{$result.num}></span>
                                <span class="mr-4"><i class="fa fa-heart-o mr-1"></i> <{$result.like}></span>
                                <!-- <span><i class="fa fa-bookmark-o mr-1"></i> 124</span> -->
                            </div>
                        </div>
                        
                        <!-- 朗诵控制 -->
                        <!-- 修改朗诵控制部分的HTML -->
                        <div class="flex items-center bg-paper p-4 rounded-lg mb-6">
                            <button id="read-poem" class="w-12 h-12 rounded-full bg-cinnabar text-rice flex items-center justify-center mr-4 hover:bg-opacity-90 transition-colors" <{if empty($result.audio)}>disabled style="opacity: 0.6; cursor: not-allowed;"<{/if}>>
                                <i class="fa fa-play"></i>
                            </button>
                            <div>
                                <p class="font-medium mb-1">聆听诗词</p>
                                <div id="wave-container" class="audio-wave hidden">
                                    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                                </div>
                                <div id="read-status" class="text-sm text-lightink">
                                    <{if $result.audio}>暂无朗诵音频<{else}>点击播放朗诵音频<{/if}>
                                </div>
                            </div>
                            <!-- 隐藏的音频元素 -->
                            <{if $result.audio}>
                            <audio id="poem-audio" src="<{$result.audio}>" preload="metadata"></audio>
                            <{/if}>
                        </div>
                    </div>
                    
                    <!-- 诗词原文 -->
                    <div class="mb-12 bg-paper p-8 rounded-xl shadow-sm scroll-reveal">
                        <div class="font-kai text-[clamp(1.5rem,3vw,2rem)] leading-loose text-center">
                            <{$result.content}>
                        </div>
                    </div>
                    
                    <!-- 解析标签页 -->
                    <div class="scroll-reveal">
                        <!-- 标签切换按钮 -->
                        <div class="flex flex-wrap border-b border-gray-300 mb-6">
                            <button class="tab-button active py-3 px-6 mr-2 border-b-2 border-transparent hover:text-cinnabar transition-colors" data-tab="annotation">注释</button>
                            <button class="tab-button py-3 px-6 mr-2 border-b-2 border-transparent hover:text-cinnabar transition-colors" data-tab="translation">译文</button>
                            <button class="tab-button py-3 px-6 mr-2 border-b-2 border-transparent hover:text-cinnabar transition-colors" data-tab="appreciation">赏析</button>
                            <button class="tab-button py-3 px-6 border-b-2 border-transparent hover:text-cinnabar transition-colors" data-tab="background">创作背景</button>
                        </div>
                        
                        <!-- 标签内容 -->
                        <div class="tab-content active" id="annotation">
                            <div class="bg-paper p-6 rounded-xl">                                
                                <{$result.annotations}>
                            </div>
                        </div>
                        
                        <div class="tab-content" id="translation">
                            <div class="bg-paper p-6 rounded-xl">
                                <{$result.translation}>

                            </div>
                        </div>
                        
                        <div class="tab-content" id="appreciation">
                            <div class="bg-paper p-6 rounded-xl">
                                <{$result.appreciation}>

                            </div>
                        </div>
                        
                        <div class="tab-content" id="background">
                            <div class="bg-paper p-6 rounded-xl">
                                <{$result.background}>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 相关诗词 -->
                    <div class="mt-16 scroll-reveal">
                        <h2 class="text-2xl font-song font-bold mb-6">相关诗词</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- 相关诗词1 -->
                            <{foreach from=$res_gushi item=v}>
                                <a href="<{spUrl c=main a=gsDetails id=$v.id}>" class="bg-paper p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow">

                                    <h3 class="font-song font-bold mb-2"><{$v.title}></h3>
                                    <p class="text-lightink text-sm mb-3"><{$v.author}></p>
                                    <p class="font-kai text-ink/80 text-sm"><{$v.content|truncate:30:'...'}></p>
                                </a>
                            <{/foreach}>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧互动区 -->
                <div class="lg:col-span-1">
                    <!-- 声景体验 -->
                    <div class="bg-paper rounded-xl overflow-hidden shadow-sm mb-8 scroll-reveal">
                        <div class="h-48 relative">
                            <img src="https://picsum.photos/600/400" alt="<{$result.title}>声景" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-ink/80 to-transparent flex items-end">
                                <h3 class="text-rice font-song font-bold p-6">声景体验</h3>
                            </div>
                        </div>
                        <div class="p-6">
                            <p class="text-ink/80 mb-4">感受诗中的氛围，聆听相关场景音效</p>
                            <button id="soundscape-btn" class="w-full bg-cinnabar text-rice py-3 rounded-lg hover:bg-opacity-90 transition-colors flex items-center justify-center">
                                <i class="fa fa-volume-up mr-2"></i> 体验《<{$result.title}>》声景
                            </button>
                            <div id="soundscape-player" class="mt-4 hidden">
                                <div class="audio-wave mb-2">
                                    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-lightink">00:00</span>
                                    <div class="flex space-x-3">
                                        <button class="text-ink hover:text-cinnabar"><i class="fa fa-step-backward"></i></button>
                                        <button class="text-ink hover:text-cinnabar"><i class="fa fa-pause"></i></button>
                                        <button class="text-ink hover:text-cinnabar"><i class="fa fa-step-forward"></i></button>
                                    </div>
                                    <span class="text-sm text-lightink">01:30</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 创作联动 -->
                    <div class="bg-paper rounded-xl overflow-hidden shadow-sm mb-8 scroll-reveal">
                        <h3 class="font-song font-bold p-6 border-b border-gray-200">创作联动</h3>
                        <div class="p-6">
                            <a href="painting.html" class="block mb-4 p-4 border border-gray-200 rounded-lg hover:border-cinnabar hover:bg-cinnabar/5 transition-colors">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 rounded-full bg-cinnabar/10 flex items-center justify-center mr-4">
                                        <i class="fa fa-paint-brush text-cinnabar"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium">生成诗画</h4>
                                        <p class="text-sm text-lightink">为《<{$result.title}>》创作一幅画</p>
                                    </div>
                                </div>
                            </a>
                            <a href="interactive.html" class="block p-4 border border-gray-200 rounded-lg hover:border-cinnabar hover:bg-cinnabar/5 transition-colors">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 rounded-full bg-cinnabar/10 flex items-center justify-center mr-4">
                                        <i class="fa fa-pencil text-cinnabar"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium">续写诗句</h4>
                                        <p class="text-sm text-lightink">尝试为《<{$result.title}>》续写新的诗句</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    
                    <!-- 用户笔记 -->
                    <div class="bg-paper rounded-xl overflow-hidden shadow-sm mb-8 scroll-reveal">
                        <h3 class="font-song font-bold p-6 border-b border-gray-200">我的笔记</h3>
                        <div class="p-6">
                            <textarea placeholder="写下你对这首诗的理解和感悟..." class="w-full p-4 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-cinnabar focus:border-transparent min-h-[120px] resize-none"></textarea>
                            <div class="mt-4 flex justify-end">
                                <button class="bg-cinnabar text-rice px-4 py-2 rounded-lg hover:bg-opacity-90 transition-colors">
                                    保存笔记
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分享 -->
                    <div class="bg-paper rounded-xl overflow-hidden shadow-sm scroll-reveal">
                        <h3 class="font-song font-bold p-6 border-b border-gray-200">分享</h3>
                        <div class="p-6">
                            <p class="text-ink/80 mb-4">将这首诗词分享给好友</p>
                            <div class="flex space-x-3">
                                <button class="w-10 h-10 rounded-full bg-[#07C160] text-white flex items-center justify-center hover:bg-opacity-90 transition-colors">
                                    <i class="fa fa-weixin"></i>
                                </button>
                                <button class="w-10 h-10 rounded-full bg-[#E6162D] text-white flex items-center justify-center hover:bg-opacity-90 transition-colors">
                                    <i class="fa fa-weibo"></i>
                                </button>
                                <button class="w-10 h-10 rounded-full bg-[#1296DB] text-white flex items-center justify-center hover:bg-opacity-90 transition-colors">
                                    <i class="fa fa-qq"></i>
                                </button>
                                <button class="w-10 h-10 rounded-full bg-ink text-rice flex items-center justify-center hover:bg-opacity-90 transition-colors">
                                    <i class="fa fa-link"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <{if $result.audio}>
    <audio id="poem-audio" src="<{$result.audio}>" preload="none"></audio>
    <{/if}>
    <script>
        
        
        // 标签切换功能
        $('.tab-button').click(function() {
            // 移除所有标签的活跃状态
            $('.tab-button').removeClass('active');
            $('.tab-content').removeClass('active');
            
            // 给当前点击的标签添加活跃状态
            $(this).addClass('active');
            const tabId = $(this).data('tab');
            $('#' + tabId).addClass('active');
        });
        
        // 修改诗词朗诵功能的JavaScript
        let isPlaying = false;
        let audioElement = null;
        let playPromise = null;

        // 页面加载完成后初始化音频元素
        $(document).ready(function() {
            <{if $result.audio}>
            audioElement = document.getElementById('poem-audio');
            
            // 音频结束时自动更新状态
            audioElement.addEventListener('ended', function() {
                resetAudioState();
            });
            
            // 音频错误处理
            audioElement.addEventListener('error', function() {
                console.error('音频错误:', audioElement.error);
                $('#read-status').text('音频加载失败，请检查文件');
                resetAudioState();
            });
            <{/if}>
        });

        // 重置音频状态
        function resetAudioState() {
            isPlaying = false;
            $('#read-poem i').removeClass('fa-pause').addClass('fa-play');
            $('#wave-container').addClass('hidden');
            $('#read-status').text('点击播放朗诵音频');
        }

        $('#read-poem').click(function() {
            <{if $result.audio}>
            return; // 没有音频时不执行任何操作
            <{/if}>
            
            if (!audioElement) return;
            
            const icon = $(this).find('i');
            
            // 如果有未完成的播放请求，先取消
            if (playPromise) {
                playPromise.then(() => {
                    audioElement.pause();
                }).catch(() => {});
            }
            
            if (isPlaying) {
                // 暂停播放
                audioElement.pause();
                resetAudioState();
            } else {
                // 开始播放
                try {
                    playPromise = audioElement.play();
                    if (playPromise !== undefined) {
                        playPromise.then(() => {
                            // 播放成功
                            isPlaying = true;
                            icon.removeClass('fa-play').addClass('fa-pause');
                            $('#wave-container').removeClass('hidden');
                            $('#read-status').text('正在播放：<{$result.title}>朗诵');
                        }).catch(error => {
                            // 处理播放错误
                            console.error('播放失败:', error);
                            $('#read-status').text('播放失败，请重试');
                            resetAudioState();
                        });
                    }
                } catch (error) {
                    console.error('播放异常:', error);
                    resetAudioState();
                }
            }
        });
        
        // 页面加载完成后初始化
        $(document).ready(function() {
            // 触发一次滚动事件，初始化导航栏状态
            $(window).trigger('scroll');
        });
    </script>

<{include file="v2/footer.html"}>
